<script setup lang="ts">
import { ref, reactive, defineEmits, toRaw, unref, shallowReactive } from "vue";
import { getListApi } from "/@/api/psi/material";
import { useInModal } from '/@/hooks/useModal'

const emits = defineEmits(['confirm'])
const modal = useInModal()

// 表格配置
const tableRef = ref<YTableInstance>();
const tableProps = reactive<YTableProps>({
  height: "auto",
  columns: [
    { field: "code", label: "物料编号", filter: true },
    { field: "name", label: "物料名称", filter: true },
    { field: "spec", label: "规格", filter: true },
    { field: "unit", label: "单位", filter: true },
    { field: "calcUnit", label: "计量单位", filter: true },
    { field: "calcPrice", label: "计价单价" },
    { field: "createTime", label: "创建时间", filterComponent: 'ElDatePicker' },
    { field: "createUser", label: "创建人" },
    { field: "updateTime", label: "更新时间", filterComponent: 'ElDatePicker' },
    { field: "updateUser", label: "更新人" },
  ],
  remoteConfig: {
    api: getListApi,
    immediate: true
  },
  filters: [{ label: '物料编号/名称', field: 'keyword' }],
});


const viewLayout: ViewLayoutProps = {
  buttons: [
    {
      title: '确定',
      type: 'primary',
      onClick: async () => {
        const selects = await tableRef.value.getCheckRecords(true)
        emits('confirm', selects)
        modal.close()
      }
    },
    { title: '取消', onClick: () => modal.close() },
  ]
}

</script>
<template>
  <ViewLayout v-bind="viewLayout">
    <YTable v-bind="tableProps" ref="tableRef"></YTable>
  </ViewLayout>
</template>